<template>
  <div class="projectManagement">
    <div>
      <div class="projectManagement_top">
        <div class="projectManagement_top_left">项目进度</div>
        <div class="projectManagement_top_right">
          <el-button type="primary" @click="dialogOverflowVisible = true">新建项目</el-button>
        </div>
      </div>
      <div class="projectManagement_detail">
        <div class="projectManagement_detail_item">
          <div class="projectManagement_detail_item_top">
            <div class="projectManagement_people">
              <div>XXX报告</div>
              <div>负责人</div>
            </div>
            <div>
              <el-button type="danger">删除</el-button>
              <el-button type="warning">编辑</el-button>
            </div>
          </div>
          <div class="projectManagement_detail_item_center">
            <div class="projectManagement_detail_item_center_left">
              <div>项目周期</div>
              <div>2023.10.1-2023.1.2</div>
            </div>
            <div class="projectManagement_detail_item_center_right">
              <div class="projectManagement_detail_item_center_right_all">
                <div>
                  <div>项目周期</div>
                  <div>2023.10.1-2023.1.2</div>
                </div>
                <div>
                  <div>项目周期</div>
                  <div>2023.10.1-2023.1.2</div>
                </div>
                <div>
                  <div>项目周期</div>
                  <div>2023.10.1-2023.1.2</div>
                </div>
              </div>
            </div>

          </div>
          <div class="flow_chart">
            <vueFlowModel :vueFlowModelData='vueFlowModelData'></vueFlowModel>
          </div>
        </div>
      </div>
      <el-dialog v-model="dialogOverflowVisible" title="新增项目" width="500" draggable overflow>
        <div>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="ruleForm.projectName" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="项目周期" prop="projectCycle">
              <el-date-picker v-model="ruleForm.projectCycle" type="date" placeholder="请选择日期" format="YYYY/MM/DD" />
            </el-form-item>
            <el-form-item label="负责人：" prop="projectLeader">
              <el-select collapse-tags v-model="ruleForm.selectedLeaders" multiple placeholder="Select"
                @change="handleCheckChange" style="width: 240px">
                <el-option v-for="item in allUserInfo" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogOverflowVisible = false">取消</el-button>
            <el-button type="primary" @click="createProjectData">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import vueFlowModel from "../components/vueFlowModel.vue";
import webRequest from "../utils/request"

export default {
  components: { vueFlowModel },
  setup() {
    // 、弹框显示隐藏
    const dialogVisible = ref(false)
    const dialogOverflowVisible = ref(false)
    const allUserInfo = ref([]);
    const vueFlowModelData = {
      nodes: [{
        id: "1",
        label: "请求回放1（开始）",
        type: "begin"
      }, {
        id: "2",
        label: "交易创建"
      }, {
        id: "3",
        label: "请求回放3"
      }, {
        id: "4",
        label: "请求回放4"
      }, {
        id: "5",
        label: "请求回放5"
      }, {
        id: "6",
        label: "请求回放6"
      }, {
        id: "7",
        label: "请求回放2（结束）",
        type: "end"
      }],
      edges: [{
        source: "1",
        target: "2"
      }, {
        source: "2",
        target: "3"
      }, {
        source: "3",
        target: "4"
      }, {
        source: "3",
        target: "5"
      }, {
        source: "5",
        target: "7"
      }]
    }
    // 创建响应式的表单数据对象
    const ruleForm = reactive({
      projectName: '',
      projectLeader: '',
      projectCycle: '',
      projectLeaderId: [],
      selectedLeaders: [],
    });
    let names = reactive([]);
    const handleCheckChange = (checkedKeys, info) => {
      names = []
      allUserInfo.value.filter(item => {
        if (checkedKeys.includes(item.id)) {
          names.push(item.name)
        }
      })
      ruleForm.projectLeaderId = checkedKeys
      console.log(checkedKeys, info, names);
    };
    // 创建表单验证规则
    const rules = reactive({
      projectName: [{ required: true, message: "请输入项目名称", trigger: 'blur' }],
      projectLeader: [{ required: true, message: "请选择负责人", trigger: 'blur' }],
      projectCycle: [{ required: true, message: "请输入项目周期", trigger: 'blur' }],
    });

    // 获取项目数据
    const getProjectData = async () => {
      const res = await webRequest.projectDetail.getProjectMethod({
        id: 1,
      })
      console.log(res);
    }
    const getProjectByPageData = async () => {
      const res = await webRequest.projectDetail.getProjectByPageMethod({
        currentPage: 1,
        pageSize: 10,
      })
      console.log(res);
    }

    const createProjectData = async () => {

      console.log(ruleForm, names,);
      const res = await webRequest.projectDetail.createProjectMethod({
        projectLeaderId: ruleForm.projectLeaderId.join(',') || '',
        projectName: ruleForm.projectName,
        projectLeader: names.join(',') || '',
        projectCycle: ruleForm.projectCycle,
      })
      dialogOverflowVisible.value = false
      console.log(res);
      // 提示创建成功
      ElMessage({
        message: '创建成功',
        grouping: true,
        type: 'success',
      })

    }
    const getAlluserInfo = async () => {
      const res = await webRequest.people.getAllPeoleInfoMethod();
      allUserInfo.value = res.data.data;
      console.log(res);
    }
    getAlluserInfo()

    getProjectData()
    getProjectByPageData()
    return {
      getProjectData,
      getProjectByPageData,
      createProjectData,
      dialogVisible,
      dialogOverflowVisible,
      activeStep: 0, // 初始激活的步骤
      ruleForm,
      rules,
      vueFlowModelData,
      condition: true, // 根据条件选择分支，true 表示第二步，false 表示第三步
      handleCheckChange,
      getAlluserInfo,
      allUserInfo
    };
  },
  watch: {
    // 监听条件的变化，根据条件选择分支
    condition(newVal) {
      this.activeStep = newVal ? 1 : 2;
    },
  },
};
</script>

<style lang="less" scoped>
.projectManagement {
  background-color: #F6F7FB;

  .projectManagement_top {
    display: flex;
    justify-content: space-between;
  }

  .projectManagement_detail {
    background-color: white;
    width: 90%;
    margin: auto;

    .projectManagement_detail_item {
      display: flex;
      flex-direction: column;
      padding: 20px;

      .projectManagement_detail_item_top {
        display: flex;
        justify-content: space-between;

        .projectManagement_people {
          display: flex;
          justify-content: space-between;
          width: 300px;
        }
      }

      .projectManagement_detail_item_center {
        display: flex;
        // justify-content: space-between;

        .projectManagement_detail_item_center_left {
          display: flex;
          justify-content: space-between;
          width: 300px;
          background-color: #ECECEC;
          border-radius: 10px;
          flex-direction: column;
          text-align: center;

          div {
            padding: 20px;
          }
        }

        .projectManagement_detail_item_center_right {
          display: flex;
          // justify-content: space-between;

          .projectManagement_detail_item_center_right_all {
            display: flex;
            justify-content: space-between;
            width: 600px;
            background-color: #ECECEC;
            border-radius: 10px;
            text-align: center;
            margin-left: 40px;

            div {
              padding: 20px;
            }
          }
        }


      }
    }
  }
}

.flow_chart {
  width: 100%;
  height: 800px;
}
</style>